<template>
	<view class="page">
		<mx-navbar>
			<template #left>
				<view class="cu-bar bg-white search" :style="{ 'margin-right': `${$jn_width}px` }">
					<text class="cuIcon-back" @click.stop="goBack"></text>
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<!-- <view class="name text-limit-1" v-if="name">{{ name }}</view> -->
						<input type="text" v-model="params.key" placeholder="输入搜索的关键词" confirm-type="search"
							@confirm="search"></input>
					</view>
				</view>
			</template>
			<template #right>
				<view />
			</template>
		</mx-navbar>

		<view class="filter-box">
			<view class="fbody flex align-center">
				<view class="fitem flex align-center justify-center" @click="reset">
					<text class="fit">
						综合
					</text>
				</view>
				<view class="fitem flex align-center justify-center" @click="setSales">
					<text class="fit" :class="{'act': params.sales}">
						销量
					</text>
					<view class="icon-box flex flex-direction align-center justify-center">
						<text class="cuIcon cuIcon-fold" :class="{'act': params.sales ==1}"></text>
						<text class="cuIcon cuIcon-unfold" :class="{'act': params.sales==2}"></text>
					</view>
				</view>
				<view class="fitem flex align-center justify-center" @click="setPrice">
					<text class="fit" :class="{'act': params.price}">
						价格
					</text>
					<view class="icon-box flex flex-direction align-center justify-center">
						<text class="cuIcon cuIcon-fold" :class="{'act': params.price ==1}"></text>
						<text class="cuIcon cuIcon-unfold" :class="{'act': params.price==2}"></text>
					</view>
				</view>
				<view class="fitem flex align-center justify-center" @click="is_brand=!is_brand;is_cate=false">
					<text class="fit" :class="{'act': is_brand}">
						品牌
					</text>
				</view>
				<view class="fitem flex align-center justify-center" @click="is_cate=!is_cate;is_brand=false">
					<text class="fit" :class="{'act': is_cate}">
						分类
					</text>
				</view>
			</view>

			<view class="filter-content" v-if="is_cate">
				<cate-com :act="params.cate" :cate_list="cate_list" @change="changeCate"></cate-com>
			</view>
			<view class="filter-content" v-if="is_brand">
				<brand-com :act="params.brand" :brand_list="brand_list" @change="changeBrand"></brand-com>
			</view>
		</view>
		<view class="mask" v-if="is_cate || is_brand" @click="is_cate=false;is_brand=false"></view>

		<view class="pbody">
			<view class="pcontent">
				<mx-watergoods :goods="goods_list" ref="water_goods" :pn="pn"></mx-watergoods>
				<mx-loading v-model="load" color="#999" v-if="is_empty != 2"></mx-loading>
			</view>
			<view class="" v-if="is_empty == 2">
				<mx-empty txt="暂无数据～"></mx-empty>
			</view>
		</view>

	</view>
</template>

<script setup>
import cateCom from './com/cate.vue'
import brandCom from './com/brand.vue'
const { proxy } = getCurrentInstance()
const data = reactive({
	init_options: {},
	pn: 1,
	name: '',
	is_empty: 1,
	goods_list: []
})

const { goods_list, name, is_empty, pn } = toRefs(data)
const water_goods = ref(null)

const params = reactive({
	first: '',
	key: '',
	cate: [],
	brand: [],
	price: '',
	sales: ''
})

onLoad((options) => {
	data.init_options = options
	setParams(options)
	getData()
	getBrand()
	getCate()
})

const brand_list = ref([])
const is_brand = ref(false)
async function getBrand() {
	let res = await proxy.$api('Brand')
	if(res.code == 0) {
		brand_list.value = res.data || []
	}
}

const cate_list = ref([])
const is_cate = ref(false)
async function getCate() {
	let res = await proxy.$api('Cate')
	if (res.code == 0) {
		cate_list.value = res.data || []
	}
}

function setParams(options) {
	if (options.key) {
		params.key = options.key
	}
	if (options.cate) {
		params.first = options.first || ''
		params.cate = [Number(options.cate)]
		// data.name = options.name
	}
	if (options.brand) {
		params.brand = [Number(options.brand)]
		// data.name = options.name
	}
}


function setSales() {
	is_cate.value = false
	is_brand.value = false
	params.sales = params.sales == 1 ? 2 : 1
	data.pn = 1
	getData()
}

function setPrice() {
	is_cate.value = false
	is_brand.value = false
	params.price = params.price == 1 ? 2 : 1
	data.pn = 1
	getData()
}

function reset() {
	is_cate.value = false
	is_brand.value = false
	data.pn = 1
	params.price = ''
	params.sales = ''
	params.cate = []
	params.brand = []
	setParams(data.init_options)
	getData()
}

function changeCate() {
	data.pn = 1
	getData()
}

function changeBrand(val) {
	data.pn = 1
	getData()
}

const load = ref('loading')
async function getData() {
	let res = await proxy.$api('GoodsSearch', {
		first: params.first,
		brand_id: params.brand,
		cate_id: params.cate,
		keyword: params.key,
		sales: params.sales,
		price: params.price,
		page: data.pn
	}, false)
	if (res.code === 0) {
		data.goods_list = res.data.list || []
		if (data.pn == 1 && res.data.list.length == 0) {
			data.is_empty = 2
		} else {
			data.is_empty = 1
		}
		if (data.goods_list.length == 0 || data.goods_list.length < 10) {
			load.value = 'finish'
		}
		proxy.$nextTick(() => {
			water_goods.value.getList(data.goods_list, data.pn)
		})
	}
}

onReachBottom(() => {
	data.pn += 1
	getData(false)
})

function goBack() {
	uni.navigateBack()
}

function search() {

	data.pn = 1
	getData()
}

onShareAppMessage(() => { })
onShareTimeline(() => { })
</script>

<style scoped lang="scss">
.search {
	width: 100%;
	// #ifdef MP
	margin-right: 180rpx;
	// #endif
	min-height: 0;

	.cuIcon-back {
		padding-left: 20rpx;
	}

	.stxt {
		font-size: 24rpx;
	}

	.name {
		max-width: 160rpx;
		padding: 0 10rpx;
		line-height: 40rpx;
		display: inline-block;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		border-radius: 10rpx;
		font-size: 20rpx;
		margin-right: 10rpx;
	}
}

.pbody {
	width: 100%;
	height: auto;
	padding: 90rpx 0 30rpx;
}

.filter-box {
	width: 100%;
	height: auto;
	position: fixed;
	left: 0;
	z-index: 9;
	background-color: #fff;

	.fbody {
		width: 100%;

		.fitem {
			flex: 1;
			font-size: 24rpx;
			height: 70rpx;

			.cuIcon{
				font-size: 20rpx;
			}
			.cuIcon-fold{
				position: relative;
				top: 6rpx;
			}
			.cuIcon-unfold{
				position: relative;
				top: -4rpx;
			}
		}
	}
	.filter-content{
		border-top: 1px solid $bg;
		box-shadow:  1rpx 10rpx 10rpx 0rpx $bg;
	}
}

// .fbom{
// 	width: 100%;
// 	height: auto;
// 	padding: 20rpx 0;
// 	.fbi{
// 		width: 330rpx;
// 		line-height: 70rpx;
// 		border-radius: 70rpx;
// 		text-align: center;
// 		font-size: 24rpx;
// 	}
// 	.fbil{
// 		color: #000;
// 		border: 1px solid #000;
// 	}
// 	.fbir{
// 		background-color: $main_color;
// 		border:  1px solid $main_color;
// 		color: #fff;
// 	}
// }
.mask{
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 5;
	background-color: rgba(0, 0, 0, 0.3);
}

.act{
	color: $main_color;
}
</style>
